<!-- <script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChartleft = echarts.init(document.querySelector('.electricechartsr_left'))
  const myChartright = echarts.init(document.querySelector('.electricechartsr_right'))
  const demoData = {
    value: 90
  }
  const option = {
    title: {
      text: '{num|' + demoData.value.value + '%}',
      x: '50%',
      y: '53%',
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontWeight: '500',
            color: '#78c7c1',
            fontFamily: '微软雅黑',
            fontSize: 16
          }
        }
      }
    },
    series: [
      // 添加一个弧形虚线圆点
      {
        type: 'pie',
        radius: ['90%', '93%'],  // 调整内外半径，创建一个弧形
        center: ['50%', '70%'],
        startAngle: 180,  // 从180度开始
        endAngle: 0,      // 到0度结束
        data: Array.from({ length: 100 }, (_, i) => ({
          value: 1,
          itemStyle: {
            color: i % 2 === 0 ? '#14736f' : 'transparent'  // 每隔一个点就显示一个小圆点
          }
        })),
        label: {
          show: false  // 不显示标签
        },
        z: 10
      },
      {
        type: 'gauge',
        radius: '90%', // 1行3个
        center: ['50%', '70%'],
        splitNumber: 10,
        // min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        z: 99,
        // 线
        axisLine: {
          lineStyle: {
            width: 1,
            color: [[1, 'rgba(255,255,255,0)']]
          },
          detail: {
            formatter: '{value}'
          },
          data: [
            {
              value: 50,
              name: 'SCORE'
            }
          ]
        },
        //刻度标签。
        axisTick: {
          show: false
        },
        splitLine: {
          //文字和刻度的偏移量
          show: false
        },
        // //刻度线文字
        axisLabel: {
          show: false
        },
        data: [
          {
            value: demoData.value.value,
            name: 'SCORE',
            itemStyle: {
              color: '#02C3A2'
            }
          }
        ],
        pointer: {
          show: true,
          length: '14%',
          radius: '0%',
          width: 2, //指针粗细
          offsetCenter: [0, -44]
        },
        detail: {
          show: false
        },
        title: {
          // 仪表盘标题。
          show: false
        }
      },
      {
        type: 'pie',
        radius: ['70%', '85%'],
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: -180,
        color: [
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'transparent' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#14736f' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#14736f' // 100% 处的颜色
              }

            ]
          },
          'transparent'
        ],
        hoverAnimation: true,
        legendHoverLink: false,
        z: 10,
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: demoData.value.value
          },
          {
            value: demoData.value.value
          }
        ]
      },
      {
        type: 'pie',
        hoverAnimation: false,
        label: {
          show: false
        },
        center: ['50%', '70%'],
        radius: ['0%', '60%'],
        startAngle: 180,
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#00C2EB' },
                    { offset: 1, color: '#094461' }
                  ]
                },
                opacity: 0.2
              }
            }
          },
          {
            value: 100,
            color: 'transparent'
          }
        ]
      }
    ]
  }


  myChartleft.setOption(option)
  myChartright.setOption(option)

  window.addEventListener('resize', () => {
    myChartleft.resize()
    myChartright.resize()
  })
})
</script> -->
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const demoData = ref({
  value: 60
})

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChartleft = echarts.init(document.querySelector('.electricechartsr_left'))
  const myChartright = echarts.init(document.querySelector('.electricechartsr_right'))

  // 设置初始的 option
  const getOption = (value) => ({
    title: {
      text: '{num|' + value + '%}',
      x: '50%',
      y: '53%',
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontWeight: '500',
            color: '#78c7c1',
            fontFamily: '微软雅黑',
            fontSize: 16
          }
        }
      }
    },
    series: [
      // 弧形虚线圆点
      {
        type: 'pie',
        radius: ['90%', '93%'],
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: 0,
        data: Array.from({ length: 100 }, (_, i) => ({
          value: 1,
          itemStyle: {
            color: i % 2 === 0 ? '#14736f' : 'transparent'
          }
        })),
        label: { show: false },
        z: 10
      },
      {
        type: 'gauge',
        radius: '90%',
        center: ['50%', '70%'],
        splitNumber: 10,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        z: 99,
        axisLine: {
          lineStyle: {
            width: 1,
            color: [[1, 'rgba(255,255,255,0)']]
          },
          detail: {
            formatter: '{value}'
          },
          data: [
            {
              value: 50,
              name: 'SCORE'
            }
          ]
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        data: [
          {
            value: value,
            name: 'SCORE',
            itemStyle: {
              color: '#02C3A2'
            }
          }
        ],
        pointer: {
          show: true,
          length: '14%',
          radius: '0%',
          width: 2,
          offsetCenter: [0, -44]
        },
        detail: { show: false },
        title: { show: false }
      },
      {
        type: 'pie',
        radius: ['70%', '85%'],
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: -180,
        color: [
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              { offset: 0, color: 'transparent' },
              { offset: 0.5, color: '#14736f' },
              { offset: 1, color: '#14736f' }
            ]
          },
          'transparent'
        ],
        hoverAnimation: true,
        legendHoverLink: false,
        z: 10,
        labelLine: { normal: { show: false } },
        data: [
          { value: value },
          { value: value }
        ]
      },
      {
        type: 'pie',
        hoverAnimation: false,
        label: { show: false },
        center: ['50%', '70%'],
        radius: ['0%', '60%'],
        startAngle: 180,
        data: [
          {
            value: 100,
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#00C2EB' },
                    { offset: 1, color: '#094461' }
                  ]
                },
                opacity: 0.2
              }
            }
          },
          { value: 100, color: 'transparent' }
        ]
      }
    ]
  })

  // 初始化图表
  myChartleft.setOption(getOption(demoData.value.value))
  myChartright.setOption(getOption(demoData.value.value))

  // 定时更新demoData.value.value并更新图表
  setInterval(() => {
    demoData.value.value = Math.floor(Math.random() * 101)  // 随机生成0到100之间的数字
    myChartleft.setOption(getOption(demoData.value.value))
    myChartright.setOption(getOption(demoData.value.value))
  }, 3000)

  window.addEventListener('resize', () => {
    myChartleft.resize()
    myChartright.resize()
  })
})
</script>
<template>
  <div></div>
</template>

<style scoped></style>